<template>
    <div ref="login" class="login">
        <Row class="pannel" type="flex" justify="center" align="middle">
            <Col span="20">
            <h2 style="text-align:center">{{platform}}</h2>
            <Form ref="ref_login_form" :model="formInline" :rules="ruleInline" block>
                <FormItem prop="mobile">
                    <Input type="text" v-model="formInline.mobile" placeholder="手机号码" />
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                </FormItem>
                <FormItem prop="password">
                    <Input type="password" v-model="formInline.password" @on-enter="handleSubmit()" placeholder="登录密码" />
                    <Icon type="ios-lock-outline" slot="prepend"></Icon>
                </FormItem>
                <FormItem style="text-align:center">
                    <Button type="primary" @click="handleSubmit()">登 录</Button>
                    <Button type="default" v-on:click="doForget()">忘记密码</Button>
                </FormItem>
            </Form>
            </Col>
        </Row>
        <span class="copyright">Copyright &copy; 2023-{{ nowyear }} {{copyright}}</span>
    </div>
</template>
<script>
import { MD5 } from '@/libs/md5'
import util from '@/libs/util'
export default {
    data() {
        return {
            platform: this.$store.getSystem('platform'),
            copyright: this.$store.getSystem('copyright'),
            formInline: {
                mobile: null,
                password: null
            },
            ruleInline: {
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { type: 'string', min: 6, message: '密码长度最小6位', trigger: 'blur' }
                ]
            },
            nowyear: this.$date(null, 'yyyy')
        }
    },
    methods: {
        handleSubmit() {
            this.$refs.ref_login_form.validate((bool) => {
                if (bool) this.doSubmit()
                else this.$Message.error('请检查填写内容')
            })
            this.$router.push({
                name: 'admin'
            })
        },
        doSubmit() {
            this.$Loading.start()
            new this.$rest({
                gateway: 'agrobiz',
                service: 'agrobiz-uc',
                url: '/v1.0/open-src/admin/user/login',
                form: {
                    userKey: MD5(this.formInline.mobile + this.formInline.password),
                    mobile: this.formInline.mobile
                },
                action: (res) => {
                    if (res.data.code === 20000) {
                        const data = res.data.data
                        console.log('登录数据',data)
                        if (data.userType === 0) {
                            this.$Message.warning('没有系统权限')
                            return false
                        }
                        
                        //初始化用户缓存
                        this.$store.initUser(data)

                        //我的菜单
                        this.$store.myTree().then(() => {
                            //我的组织
                            this.$store.myOrg().then(() => {
                                this.$router.push({
                                    name: 'admin'
                                })
                                this.$Loading.finish()
                            }).catch((err) => {
                                this.$Message.error(err)
                            })
                        }).catch((err) => {
                            this.$Message.error(err)
                        })

                        //我的店铺
                        if(data.shopId) {
                            this.$store.myShop(data.shopId)
                        }

                        //我的仓库
                        if(data.warehouseId) {
                            this.$store.myWarehouse(data.warehouseId)
                        }

                    } else if (res.data.code === 20001) {
                        this.$Message.error('账号密码错误')
                        this.$Loading.error()
                    } else {
                        this.$Message.error(res.data.msg)
                        this.$Loading.error()
                    }
                }
            }).post(true)
        },
        //忘记密码
        doForget() {
            this.$Modal.info({
                title: '温馨提示',
                content: '暂未开放，敬请等待..'
            });
        }
    },
    created() {
        this.$nextTick(() => {
            util.noiseBackground(this.$refs.login, 50, 50, 0.04)
        })
    }
}
</script>
<style scoped lang="less">
.login {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    .pannel {
        width: 300px;
        height: auto;
        border: 1px solid #dedede;
        border-radius: 8px;
        box-shadow: 0 0 20px #0000001e;
        background-image: linear-gradient(0deg, #fbfdfe, #fff);

        h2 {
            margin: 20px 0;
        }
    }

    .copyright {
        position: absolute;
        bottom: 20px;
        font-size: 12px;
        color: #a7a7a7;
    }
}
</style>
